<template>
    <Dialog :title="comInfo.name" :show="true" @close="cancel" :width="400" :height="350" :left="uiLeft" :top="uiTop">
        <div class="center-table">
            <el-table :data="recordListRef" ref="selectAppTable" border :cell-style="cellStyle2"
                :header-cell-style="cellStyleSmall">
                <el-table-column prop="id" label="ID" width="50" />
                <el-table-column prop="startTime" label="创建时间" :show-overflow-tooltip="true" width="auto" />

                <el-table-column label="操作" width="200" align="center">
                    <template #default="scope">
                        <div class="taskProgres"
                            v-if="taskProgressRef.length && (percentageInfoRef.id == scope.row.id)">
                            <div class="elprogress">
                                <el-progress :text-inside="true" :stroke-width="16"
                                    :percentage="percentageInfoRef.percentage">
                                </el-progress>
                            </div>
                            <div id="table-operation">
                                <el-button size="small" text @click="cancelTask(percentageInfoRef.taskId)">
                                    <img src="@/assets/modelser/cancel.png" /> 取消
                                </el-button>

                            </div>
                        </div>
                        <div id="table-operation" v-else>
                            <el-button size="small" text @click.stop="editList(scope.row)">
                                <img src="@/assets/modelser/xiugai.png" /> 编辑
                            </el-button>
                            <el-button size="small" text @click.stop="delList(scope.row)">
                                <img src="@/assets/modelser/delete.png" /> 删除
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </Dialog>
    <TooltipCom v-if="currentDialog == 'del'" :content="'确认删除该版本记录？'" :title="'删除'" :isVisible="true"
        @close="currentDialog = undefined" @confirm="delConfirm" />
    <TooltipCom v-if="currentDialog == 'edit'" content="查看版本记录会删除正在编辑的对象，是否继续？" :title="'提示'" :isVisible="true"
        @close="currentDialog = undefined" @confirm="editConfirm" />
</template>
<script setup lang="ts">
import Dialog from "@/components/Dialog.vue";
import { onBeforeUnmount, onMounted, ref, watch, nextTick } from "vue";
import {
    cellStyle2,
    cellStyleSmall
} from "../../scripts/tableStyle";
import { getProjectManager } from "../../scripts/getProjectManager";
import {
    createVueDisposer,
    toVR,
} from "earthsdk-ui";
import TooltipCom from "../../components/common/TooltipCom.vue";
import { ElMessage } from "element-plus";

const props = withDefaults(defineProps<{ comInfo: any }>(), {});
const emits = defineEmits(["cancel"]);
const cancel = () => {
    emits("cancel", props.comInfo.id);
};
const uiLeft = document.body.clientWidth - 10 - 400;

const uiTop = document.body.clientHeight - document.body.clientHeight / 2;

const d = createVueDisposer(onBeforeUnmount);

const objm = getProjectManager();
const modelserManager = objm.modelserManager;
const modelserSceneTreeWrapper = objm.modelserSceneTreeWrapper

// 记录列表
const recordListRef = toVR<any>(d, [modelserManager, "recordList"]);
const taskProgressRef = toVR<any>(d, [modelserManager, "taskProgress"]);
const percentageInfoRef = toVR<any>(d, [modelserManager, "percentageInfo"]);



onMounted(() => {
    modelserManager.getRecordlist()
})
// watch(recordListRef, () => {
//     modelserManager.getRecordlist()
// })

const selectAppTable = ref<any>(null);
const handleRowClick = (row: any) => {
    console.log(row);
    nextTick(() => {
        selectAppTable.value?.setCurrentRow(row);
    });
}
const currentDialog = ref<any>(undefined)

// 编辑
const editList = (row: any) => {
    const c = modelserSceneTreeWrapper?.json.root.children
    if (c && c.length > 0) {
        return new Promise((resolve) => {
            currentDialog.value = "edit";
            const d = modelserManager.dialogEvent.disposableOnce(async (val: string) => {
                d();
                if (val === "editConfirm") {
                    const json = JSON.parse(row.srcJson).sceneTree
                    objm.setSceneTreeJson(modelserSceneTreeWrapper, json)
                }
                currentDialog.value = undefined;
                resolve("ok");
            });
        });
    } else {
        const json = JSON.parse(row.srcJson).sceneTree
        objm.setSceneTreeJson(modelserSceneTreeWrapper, json)
    }
}

const editConfirm = () => {
    modelserManager.dialogEvent.emit("editConfirm");
}


// 删除
const delList = (row: any) => {
    return new Promise((resolve) => {
        currentDialog.value = "del";
        const d = modelserManager.dialogEvent.disposableOnce(async (val: string) => {
            d();
            if (val === "delConfirm") {
                currentDialog.value = undefined;
                await modelserManager.delRecord(row.id)
                // 重新获取列表
                await modelserManager.getRecordlist()
                // 刷新 modelserUrl
                await modelserManager.refresh()
            }
            currentDialog.value = undefined;
            resolve("ok");
        });
    });

}


// 删除 确定按钮
const delConfirm = async (row: any) => {
    modelserManager.dialogEvent.emit("delConfirm");
}

// 取消任务
const cancelTask = async (taskId: string) => {
    await modelserManager.cancelTask(taskId)
    // 重新获取列表
    await modelserManager.getRecordlist()
    // 刷新 modelserUrl
    await modelserManager.refresh()
}
</script>
<style scoped>
.center-table {
    padding: 10px;
}

.notask {
    display: flex;
    justify-content: center;
    gap: 0 10px;
}

.taskProgres {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 10px;
}

.elprogress {
    width: 70%;
}

button {
    cursor: pointer;
}

.el-button,
.el-button.is-round {
    height: 20px;
    padding: 0 7px;
}

#table-operation img {
    width: 17px !important;
    height: 18px !important;
    margin-right: 6px;
}
</style>
